<template>
  <div class="app-container">
    <!-- 查询结果 -->
    <el-table v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" border fit highlight-current-row>
      <el-table-column type="index" :index="getIndex" width="50"></el-table-column>

      <el-table-column align="center" :label="$t('日期')" prop="date"/>

      <el-table-column align="center" :label="$t('订单总数')" prop="totalCount"/>

      <el-table-column align="center" :label="$t('商品总数')" prop="productCount"/>

      <el-table-column align="center" :label="$t('订单总额')" prop="totalAmount">
        <template slot-scope="scope">
          {{scope.row.totalAmount | floorTwoDecimal}}
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('税费总额')" prop="taxTotalAmount">
        <template slot-scope="scope">
          {{scope.row.taxTotalAmount | floorTwoDecimal}} $
        </template>
      </el-table-column>

<!--      <el-table-column align="center" property="taxDetailLs" :label="$t('税费详情')">
        <template slot-scope="scope">
          <div v-for="tax in scope.row.taxDetailLs" :key="tax.code">
            {{tax.code}}: {{tax.totalAmount | floorTwoDecimal}}
          </div>
        </template>
      </el-table-column>-->
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>

<script>
  import { allForPerm} from '@/api/shop'
  import { orderHourStatistics } from '@/api/order'
  import BackToTop from '@/components/BackToTop'
  import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
  import store from '@/store'

  export default {
    name: "orderStatisticsHour",
    components:{
      BackToTop, Pagination
    },
    data(){
      return {
        // 当前店铺
        shop: store.state.user.shop,
        listLoading: true,
        total:0,
        listQuery: {
          page: 1,
          limit: 20,
          shopId: undefined,
          // 开始时间
          searchDate: undefined,
          time:undefined
        },
        totalStatistics: {},
        list: [],
        shops:[]
      }
    },
    created() {
      this.listQuery.shopId = this.$route.query.shopId
      this.listQuery.searchDate = this.$route.query.searchDate
      this.listQuery.time = this.$route.query.time

      this.getList()
      allForPerm().then(response=>{
        this.shops = response.data.data.list
      })
    },
    methods: {
      getList(){
        orderHourStatistics(this.listQuery)
          .then(response => {
            this.list = response.data.data.list
            this.total = response.data.data.total
            this.listLoading = false
          })
          .catch(() => {
            this.list = []
            this.total = 0
            this.listLoading = false
          })
      },
      handleFilter(){
        this.getList()
      },
      getIndex(index) {
        return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
      }
    }
  }
</script>

<style scoped>
  .table-layout {
    margin-top: 20px;
  }

  .table-cell {
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
</style>
